<html>
  <head>
    <title>LogViewer: xarc application development logs</title>
    <link rel="stylesheet" href="./cwd/node_modules/@xarc/app-dev/lib/dev-admin/json-formatter.css">
    <style>
      /* styles from https://www.w3schools.com/howto/howto_css_fixed_menu.asp */
      /* The navigation bar */
      .navbar {
        overflow: hidden;
        background-color: #ffffff;
        position: fixed; /* Set the navbar to fixed position */
        top: 0; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
      }

      /* Links inside the navbar */
      .navbar a {
        /* color: #f2f2f2; */
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
      }

      /* Change background on mouse-over */
      .navbar a:hover {
        background: #1e9ae2;
        color: black;
      }

      /* Main content */
      .main {
        margin-top: 30px; /* Add a top margin to avoid content overlay */
        border-radius: 10px;
        background: black;
        color: gray;
        padding: 10px;
      }

      .logs {
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
        font-size: medium;
        line-height: normal;
      }

      .flex {
        display: flex;
      }

      .hide {
        display: none;
      }

      .show {
        display: inline;
        flex: 0 0 128px;
      }

      .unselectable {
        user-select: none;
        -webkit-user-select: none;
      }

      .mx-2 {
        margin-left: 2px;
        margin-right: 2px;
      }

      .mr-16 {
        margin-right: 16px;
      }

      .w-10	 {
        width: 2.5rem;
      }

      .inline-block {
        display: inline-block;
      }

      .text-center {
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div id="controls" class="navbar">
      <button type="button" onclick="toggleMeta();">Hide/Show Meta Info [Ctrl+M]</button>
      <button type="button" onclick="toggleJSONPretty();">Turn On/Off JSON Prettier [Ctrl+J]</button>
      <button type="button" onclick="displayLogs();">Refresh Logs</button>
      <button type="button" onclick="wipeLogs();">Wipe Logs [Ctrl+K]</button>
      <label>
        <input type="checkbox" id="level.error" checked onclick="levelChangeHandler();" />
        Error
      </label>
      <label>
        <input type="checkbox" id="level.warn" checked onclick="levelChangeHandler();" />
        Warn
      </label>
      <label>
        <input type="checkbox" id="level.info" checked onclick="levelChangeHandler();" />
        Info
      </label>
      <label>
        <input type="checkbox" id="level.http" checked onclick="levelChangeHandler();" />
        Http
      </label>
      <label>
        <input type="checkbox" id="level.verbose" checked onclick="levelChangeHandler();" />
        Verbose
      </label>
      <label>
        <input type="checkbox" id="level.debug" checked onclick="levelChangeHandler();" />
        Debug
      </label>
      <label>
        <input type="checkbox" id="level.silly" checked onclick="levelChangeHandler();" />
        Silly
      </label>
      <a href="/__electrode_dev" class="button">Dev Dashboard</a>
    </div>
    <div class="main">
      <pre class="logs" id="logs"></pre>
    </div>
    <script>
      /*{{JSON_FORMATTER_JS}}*/
      /*{{LOG_VIEW_JS}}*/
    </script>
  </body>
</html>
